<template>
  <div class="login">
    <h1 class="login-title">{{ title }}</h1>

    <div class="login-content">
      <!--登录-->
      <template v-if="!isSelectTenant">
        <!--账号登录-->
        <account-login
          @multiTenant="multiTenant"
        />
      </template>

      <!--选择租户-->
      <select-tenant
        v-else
        is-login
        :login-data="loginData"
      />
    </div>
  </div>
</template>

<script>
  import AccountLogin from './components/account-login'
  import SelectTenant from './components/select-tenant'

  export default {
    name: 'Login',
    components: {
      AccountLogin,
      SelectTenant
    },
    data () {
      return {
        isSelectTenant: false, // 选择租户
        loginData: null
      }
    },
    computed: {
      title () {
        return this.isSelectTenant ? '选择租户' : '登录'
      }
    },

    methods: {
      // 该用户属于多租户，需要选择租户
      multiTenant ({ tenantList, loginData }) {
        this.$store.commit('setTenantList', tenantList)
        this.loginData = loginData

        this.isSelectTenant = true
      }
    }
  }
</script>

<style lang="less" scoped>
  .login {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 368px;
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(4, 12, 44, 0.25);
    border: 1px solid #e5e6e9;

    &-title {
      line-height: 56px;
      font-size: 16px;
      font-weight: 700;
      border-bottom: 1px solid #e5e6e9;
      text-align: center;
    }

    &-content {
      padding: 20px 40px;
    }
  }
</style>